<template>
  <div id="app">
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>选中</th>
          <th>图片</th>
          <th>单价</th>
          <th>个数</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in friult" :key="index">
          <td>
            <input type="checkbox" v-model="item.selected" />
          </td>
          <td>
            <img :src="item.image" style="width: 50px; height: 50px" />
          </td>
          <td>¥{{ item.price }}</td>
          <td>
            <button @click="decrement(index)" class="btn">-</button>
            <span class="mybtninner">{{ item.quantity }}</span>
            <button @click="increment(index)" class="btn">+</button>
          </td>
          <td>¥{{ item.price * item.quantity }}</td>
          <td>
            <button @click="decrement(index, true)">移除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="selectNone">全不选</button>
      <button @click="selectAll">全选</button>
    </div>
    <div>
      <h2>总计: ¥{{ total }}</h2>
      <button @click="checkout">结算</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

interface CartItem {
  image: string;
  price: number;
  quantity: number;
  selected: boolean;
}
const friult = ref<CartItem[]>([
  {
    image:
      "https://img.yimutian.com/sells/625fab282d211f7102a6fbd303200320-420-420C.jpeg",
    price: 6,
    quantity: 2,
    selected: true,
  },
  {
    image:
      "https://img1.baidu.com/it/u=602937815,3957367405&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
    price: 7,
    quantity: 1,
    selected: false,
  },
]);
function decrement(index: number, all?: boolean) {
  if (all) {
    friult.value[index].quantity = 0;
  } else {
    if (friult.value[index].quantity > 0) {
      friult.value[index].quantity--;
    } else {
      return
    }
  }
}
function increment(index: number) {
  if (friult.value[index].quantity >= 0) {
    friult.value[index].quantity++;
  } else {
    return
  }
}
function selectAll() {
  friult.value.forEach((item) => (item.selected = true));
}
function selectNone() {
  friult.value.forEach((item) => (item.selected = false));
}
const total = computed(() => {
  return friult.value.reduce((acc, cur) => {
    if (cur.selected) {
      return acc + cur.price * cur.quantity;
    } else {
      return acc;
    }
  }, 0);
});
function checkout() {
  console.log("结算");
}
</script>

<style scoped>
#app {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

h1,
h2 {
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th,
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.mybtninner {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #333;
  font-size: 12px;
  cursor: pointer;
}

.btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #333;
  font-size: 12px;
  cursor: pointer;
}

.btn:hover {
  background-color: #ccc;
}
</style>
